import { Table, Divider, Popconfirm, Button, Icon, message, Input, Modal} from 'antd';
import { connect } from "dva";
import {useState,useEffect} from 'react';
import Link from 'umi/link';
import { createStore, combineReducers } from "redux";

function searchProductFenLei(props) {
	window.scrollTo(0,0)
	const [visible,setVisible] = useState(false)
	let value1 ="";
	let value2 ="";
	let value3 ="";
	let value4 ="";
	let value5 ="";
	const handleCancel=()=>{
		setVisible(false)
		props.history.go(0)
	}
	const [coss,setCoss] = useState(0)
	useEffect(()=>{
		console.log(props.location.query.id)
		const fetchData = async () =>props.dispatch(
			{
				type:'info/getProductCategories',
				payload:{
					pageSize:10,
					page:1,
					name:props.location.query.id,
				}
			},
		) 
		fetchData(); 
	},[coss])
	
	const data=[]
	for(let i=1;i<props.page+1;i++){
		props.productlist.map(item=>
		data.push({
			index:i,
			key: item._id,
			name: item.name,
			image:item.coverImg,
		}))
	}
	console.log(data)
	
	const columns = [
		{
		  title: '商品图片',
		  dataIndex: 'image',
		  render: text => <img src={text} style={{width:100,height:100}}/>,
		},
	  {
	    title: '商品id',
	    dataIndex: 'key',
	  },
	  {
	    title: '商品名称',
	    dataIndex: 'name',
	  },
	  {
	    title: '操作',
	    render: (text, record) => (
	      <span>
	        <a onClick={()=>props.dispatch({
				type:'info/getProductCategoriesInfo',
				payload:{
					id:record.key
				}
				}).then(()=>{
				setVisible(true)
			})}>修改</a>
	        <Divider type="vertical" />
	        <a onClick={()=>props.dispatch({
				type:'info/deleteProductCategoriesInfo',
				payload:{
					id:record.key
				}
				}).then(()=>{
					message.success('删除成功~');
					setCoss(() => {
					    return (coss+1);
					  })
				})
			}>删除</a>
	      </span>
	    ),
	  },
	];
	
	const total={
	  columns:columns,
	  dataSource: data,
	  pagination: {
	    pageSize:10,
	    current: props.current,
	    total:props.totalCount,
	    onChange: (page) => props.dispatch(
			{
				type:'info/getProductCategories',
				payload:{
					per:10,
					page,
					name:props.location.query.id,
				}
			},
		) 
	  }
	}
	
  return (
	<div>
		<h1 style={{position:'relative',}}>搜索结果 <Link to="/home/fenlei"><Button type="primary" style={{position:'absolute',right:0,top:0}}>返回</Button></Link></h1>
		<Table {...total} />
		<Modal
		    title="修改"
		    visible={visible}
		    onOk={()=>props.dispatch({
				type:'info/editProductCategoriesInfo',
				payload:{
					id:props.id,
					name:value1.state.value,
					descriptions:value2.state.value,
					coverImg:value3.state.value,
					productId:value4.state.value,
					productCreatedAt:value5.state.value
				}
			}).then(()=>{
				setVisible(false)
				if(props.id){
					message.success('修改成功~')
					setCoss(() => {
						return (coss+1);
					})
					setTimeout(function() {
						props.history.go(0)
					},0);
				}
			})}
		    onCancel={handleCancel}
			okText="确认"
			cancelText="取消"
		>
		    商品名称:<Input defaultValue={props.productName} type="text" style={{height:40,margin:10}} ref={(val) =>value1 = val} />
		    商品描述:<Input defaultValue={props.productDesc} type="text" style={{height:40,margin:10}} ref={(val) =>value2 = val} />
		    商品图片:<Input defaultValue={props.productIamge} type="text" style={{height:40,margin:10}} ref={(val) =>value3 = val} />
			商品ID:<Input defaultValue={props.id} type="text" style={{height:40,margin:10}} ref={(val) =>value4 = val} />
			发布时间:<Input defaultValue={props.productCreatedAt} type="text" style={{height:40,margin:10}} ref={(val) =>value5 = val} />
		</Modal>
	</div>
  )
}

export default connect(state=>state.info)(searchProductFenLei)
